iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
1

昨天寫到了一串code,如果對於JS沒有基礎的人可能會頭很大XD

.then(function(data) {
    this.blogs = data.body.slice(0, 10);
});

所以今天我覺得應該要來點JavaScript,讓大家熟悉一下這個強大又美麗的語言,還有一些常用語法!

甚麼是JS

我們會說JavaScript是一個動態程式語言,之前有稍微提到*(在地圖那裏)*說JavaScript是負責讓我們的HTML動起來! 舉一個簡單的例子,今天如果你想要在網頁上呈現一個警告
https://ithelp.ithome.com.tw/upload/images/20200916/20129730u2M6YHvdH0.jpg

那麼你要做的就是在script裡面寫到

alert(this.blogs);

this.blogs是昨天的東西~

當然不只這些~ JavaScript厲害的地方在於它可以做出一些2D的圖像、立體圖像、動畫、遊戲等等,雖然是都可以做但是實在太複雜XD,我們最常用的應該就是: 當我們今天按下了一個button -> 我們訂定了一個function 叫做 onClick(),而這個onclick要做甚麼? 就會在JavaScript裡面寫到~


JS基本功

變數Variables

變數就是我們指定給一個值得名子,方便之後我們運算的時候使用~
通常要設定一個變數的時候我們要先使用let, const在前面告訴JavaScript我們要儲存變數了~

let index = 1;

這就代表我們讓index這個變數設為 = 1,除此之外我們還有另外一個宣告的方法叫做 const

const variable = 'hello';

這兩個最主要的差異就是這兩個最主要的差異就是const 不能改變他的值,例如我設定 const pi = 3.14 那接下來我們就不能再去改變這個 pi因為她一值以來都會變成 3.14這個值。

而變數可以儲存甚麼值呢?

  • String
  • Boolean
  • Number
  • Array
  • Object

Conditions

我這邊部會多加贅述,因為她就是很基本的 if, else if語法

let greeting = 'hello';
if (greeting === 'hello') {
  alert('Hello Guys');    
} else {
  alert('No Hello la');    
}

Functions

其實這個東西運用的很廣泛,有些瀏覽器內建好的函式例如

alert('Helllo i'm function');

那今天我們要怎麼客製化一個函式Funciton呢?

function add(num1,num2) {
  let result = num1 + num2;
  return result;
}

呼叫一個=> function + 函式的名子 + (parameter)
這樣就可以囉~ 注意一點就是有一個 return...; 這就是代表今天這個函示他最後要回傳甚麼東西。

所以我們設定完函示之後,如果要使用他就可以直接

add(1, 3);

這樣他就會 return 4給你囉~

Events

Events事件之前有稍微提到~ 概念上就是,當我們今天按下了一個button那接下來會觸發甚麼事情? 觸發機制 = 事件,舉一個簡單的例子:

myButton.onclick = function() {
    alert('Trigger me XD');
}

myButton只是一個變數部用理他,那這個 onclick就是一個匿名的函示,代表著當今天滑鼠按到十會觸發的事件,後面的 (){}就是定義要發生甚麼事情啦!


ES6

ES6 = ECMAScript 6, 這是一個標準化的Javascript,而功喜各位有幸參與到ES6的世界,這次來介紹一下他對於ES5有甚麼新功能 (著重在我們會比較常用到的)

1. 在parameters裡面設參數

之前如果我們要在一個funciton 裡面使用傳遞進來的參數,就要重新給他一個變數*(for this funciton)*

var greeting = function (text, url) {
    var text = text || 'Hello'
    var url = url || 'https://ithelp.ithome.com.tw/articles/10236817'
    ...
}

現在不用啦~我們直接在parameter裡面就可以設定參數了!

var greeting = function(text='Hello', url = 'https://ithelp.ithome.com.tw/articles/10236817') {
  ...
}

2. Destructuring

這個可能就比較複雜一點,我們我們先給各位看例子

var user = req.user,
  username = user.username,
  password = user.password 

在ES5的時候,如果有一個物件叫做 User,然後他有兩個attribute屬性: 1. username 2. password。那在ES5就要這樣去設定~ 但是ES6更上一層樓,直接用一個{}就解決了!!

var {username, password} = req.user

3. variables in string

在之前如果我們要輸出一行字,那這行字裡面假設需要函有變數,那在ES5就會是一個麻煩的存在:

var greeting = 'Hello, ' + firstName + ' ' + lastName + '.'

但在ES6可以用backticks (在鍵盤左上角,數字一的旁邊):

var greeting = `Hello, ${firstName} ${lastName}.`

4. Arrow Function

這是我認為最重要且最好用的改動~ 想要詳細了解的人可以去搜尋 Javascript ES6 Arrow Function! 他有很多不同的玩法XD,先給各位看看我們在ES5裡面要用 _this來指向this

var _this = this
$('.btn').click(function(event){
  _this.sendData()
})

在ES6就可以直接

$('.btn').click((event) =>{
  this.sendData()
})

另外一個例子,如果我們要用map這個方法提取array裡面的資料

var index = ['122345','678910']
var text = index.map(function (value) {
  return "index is = " + value
})

map 是一個可以拿來跑遍所有array裡面值的方法,並回傳並組合出一個新的陣列
但現在ES6用一行就可以了

var index = ['122345','678910']
var text = index.map(value => return `index is = ${value}`)

相當的便利,相當的感動XD


後記

當然ES6不只這些功能~ Javascript也將會是一條漫漫長路需要你去學習,之後我一定會用到JS,但是我會在遇到比較特別的東西時停下腳步帶你看後面的邏輯,在這之前,如果各位有時間,也千萬要記得!!

如果你要踏上前端這座島嶼,一定要學好JavaScript!!


上一篇
【D15 - 用Vue實作網頁】牽著for的手,帶你走forever
下一篇
【D17 - Vue說他願意共用!?】Vue 的 Mixins
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言